<template>
    <div class="moreResult">
        <van-list  v-model="loading" :finished="finished"   @load="listRoll" :offset="offset" :immediate-check="isCheck">
            <div class="groupbox" v-for="(item,index) in listdata" :key="index" @click="goDetails(item.id)">
                <!-- <img class="flowimg" v-if="type==1" src="http://img.xianyufanshen.net//my/tuijian@2x.png" alt="推荐"> -->
                <img class="flowimg" v-show="item.is_bond==1 && lang =='zh'" src="http://img.xianyufanshen.net//index/bao@2x.png" alt="保证金协议">
                <img class="flowimg" v-show="item.is_bond==1 && lang =='en'" src="http://img.xianyufanshen.net//index/bao_english@2x.png" alt="">
                <img :src="item.head_img" alt="">
                <div class="txtbox">
                    <p>{{item.title}}</p>
                </div>
                <div class="price">￥{{item.price}}</div>
            </div>
            <div style="clear:both"></div>
        </van-list>
        <div v-if="finished && total==0" class="zanwubox">
            <img src="http://img.xianyufanshen.net//search/zanwuxiangguancangpin@2x.png" alt="暂无搜索结果">
            <p class="zanwu" v-if="lang=='zh'">抱歉，暂未搜索到相关藏品~</p>
            <p class="zanwu" v-else>Sorry, I haven't searched the collection yet~</p>
        </div>
    </div>
</template>
<script>
import { getRecommendList,getNewList,getHotList} from "@/api/search"
import {Toast,List} from 'vant';
export default {
    name:'moreResult',
    //声明组件
    components:{
        [Toast.name]:Toast,
        [List.name]:List,
    },
    data (){
        return{
            userId:0,
            lang:'zh',
            catagrayId:0,//分类ID 不限分类
            listdata:[], //获取的列表内容
            total:0,//总条数
            pageIndex:1,
            pageSize:10,
            offset:50,
            loading: false,//是否正在加载
            finished: false,//是否加载完整
            isCheck:false,//是否一开始检查滚动
            dataLength:0,//数据listData长度
            type:1,//数据类型 1推荐 2每周精选 3最新发布
            ajaxMethod:'',//调用接口方法 根据type取值
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获取语言环境
        if(this.$route.query.lang){
            this.lang = this.$route.query.lang;
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
        //获取类型
        if(this.$route.query.type){
            this.type = this.$route.query.type;
            if(this.type ==1){
                this.ajaxMethod = getRecommendList;
            }else if(this.type ==2){
                this.ajaxMethod = getHotList;//每周精选
            }else{
                this.ajaxMethod = getNewList;//每周精选
            }
        }
        this.getList();
    },
    //方法
    methods:{
        //获得数据
        getList(){
            this.ajaxMethod(this.catagrayId,this.pageIndex,this.pageSize,this.lang).then(res=>{
				if(res.code == 200){
                   let data = res.data.list;
                   this.total = res.data.total;//总共数量
                //    console.log(data);
                    //判断有没有数据了
                    if(data.length>0){//有数据
                        this.listdata = this.listdata.concat(data);
                        this.loading = false;
                    }else{//没有数据
                        this.finished = true;
                        this.loading = false;
                    }
                    // console.log(this.data); 
                    this.dataLength = this.listdata.length; 
                    this.load = false;
                }else{
                    Toast(res.msg);
                }
            });
        },
        //滚动加载数据
        listRoll() {
            // console.log("滚蛋了");
            let _this = this;
            _this.pageIndex++;
            _this.getList();
        },
        //跳转到详情
        goDetails(id){
            let para = {};
            para.id = id;//藏品详情详情id (返回首页 此参数没有)
            para.linkType = "goodsDetail";
            para.lang = this.lang;//显示网页语言类型 zh中文 en英文
            para.rightBtn = "发布藏品"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
            // para.HideFootBar = false; //隐藏底部操作按钮 没有该参数代表不隐藏
            this.interaction.hLinkToApp(para);	
        },
    }
    
}
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
.moreResult{
    width :100%;
    height :100%;
    background :#fff;
   
    .van-list{
        background-color :#fff; 
         overflow: hidden;
          padding :.133333rem 0;
    }
    .groupbox{
        width :48%;
        height :6.826667rem;
        border : .026667rem solid #f1f1f1;
        margin-left :.133333rem;
        margin-bottom :.133333rem;
        float :left;
        position :relative;
        overflow: hidden;
        img {
            width :100%;
            height :4.8rem;
        }
        .flowimg{
            width :1.093333rem;
            height :.56rem;
            position :absolute;
            top:0;
            left :0;
        }
        .txtbox{
            width :100%;
            height 1.28rem;
            padding :.16rem 0;
            text-align :center;
            p{
                padding :0 .213333rem;;
                width :100%;
                height :.96rem;
                line-height :.48rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-family:PingFangSC-Medium;
                font-size:.346667rem;
                color:#494949;
                letter-spacing:.0048rem;
                text-align:left;
            }
        }
        .price{
            padding :0 .213333rem;
            font-family:PingFangSC-Medium;
            font-size:.32rem;
            color:#cb9c57;
            letter-spacing:.005333rem;
            text-align:left;
        }
    }
    .zanwubox{
        width :100%;
        height:100%;
        text-align :center;
        padding-top :3.5rem;
        img{
            width :3.226667rem;
            height :3.226667rem;
            margin :0 auto;
            vertical-align :middle;
        }
        .zanwu{
            margin-top :.4rem;
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            color:#a2a2a2;
            letter-spacing:.0048rem;
            text-align:center;
        }
    }
    
}
</style>


